<template>
	<view class="content">
		<view class="order-step box">
			<!-- <uni-steps :options="list2" active-color="#02B1AA" active-icon="circle-filled" :active="active" direction="column" /> -->
			 <my-step style="margin: 20rpx auto;width: 90%;" :options="list2" :active='active'></my-step>
		</view>
		<!-- <view class="refund box">
			<view class="soli-item">
				<text class="title">退款金额</text>
				<text class="value">￥59.9</text>
			</view> 
			<view class="refund-tip">
				退款将在2小时内，退回原账户
			</view>
		</view> -->
		<view class="mainTitle">
			车俩信息
		</view>
		<view class="carInfo box">
			<car-item :cartInfo='orderInfo.cartInfo'></car-item>
		</view>
		<view class="mainTitle">
			洗车方案
		</view>
		<view class="carInfo box">
			<plan-item :planInfo='orderInfo.washMenu'></plan-item>
		</view>
		<view class="allPrice">
			<text class="all">合计:&nbsp;</text>
			<text class="dw">￥</text>
			<text class="price">{{orderInfo.cost}}</text>
		</view>
		<view class="soli-item box" style="width: 686rpx;margin-bottom: 40rpx;">
			<text class="title">客服电话</text>
			<text class="phone value" @click="$callPhone(orderInfo.linkPhone)">{{orderInfo.linkPhone}}</text>
		</view>
		<view class="box" style="margin-bottom: 20rpx;">
			<view class="soli-item">
				<text class="title">订单号</text>
				<text class="value">{{orderInfo.sn}}</text>
			</view>
			<view class="soli-item">
				<text class="title">服务地址</text>
				<text class="value">{{orderInfo.fullAddress}}</text>
			</view>
			<view class="soli-item">
				<text class="title">服务时间</text>
				<text class="value">{{orderInfo.appointmentTime}}</text>
			</view>
			<view class="soli-item">
				<text class="title">支付方式</text>
				<text class="value">微信支付</text>
			</view>
			<view class="soli-item">
				<text class="title">下单时间</text>
				<text class="value">{{orderInfo.orderFlows[0].createDate}}</text>
			</view>
		</view>
		<view class="soli-item box" style="width: 686rpx;margin-bottom: 200rpx;">
			<text class="title">备注</text>
			<text class="value">{{orderInfo.remark}}</text>
		</view>
		<view class="footer" v-if='orderInfo.orderStatus - 2 < 0'>
			<button class="btn" @click="cancelWash" type="default">取消预约</button>
		</view>
		<uni-popup ref="orderPopup" :mask-click="false">
	  	 <view class="popup-content">
	  		<view class="popup-title">温馨提示</view>
	  		<view class="popup-tip-info">
	  			{{msg}}
	  		</view>
	  		<view class="popup-btns">
	  			<button class="btn " type="default" @click="sureCancel">确认取消</button>
	  			<button class="btn btn1" type="primary" @click="close">再想想</button>
	  		</view>
	  	 </view>
	  </uni-popup>
	</view>
</template>

<script>
	import {orderDetail, cancelOrder, validateOrder} from '@/untils/api'
	export default {
		data() {
			return {
				orderInfo:null,
				active:0,
				msg:'',
				list2: []
			};
		},
		mounted(){
			let id = this.$mp.query.id
		    this.getOrderInfo(id)	
		},
		methods:{
			close() {
			  this.$refs.orderPopup.close()	
			},
			cancelWash(){
				 validateOrder({sn:this.orderInfo.sn}).then((res) => {
					 const{code,msg} = res;
					 if(code === 4003 ){
						 this.msg = msg
						 this.$refs.orderPopup.open()
					 }else if(code === 200){
						 this.sureCancel()
					 }
				 })
			},
		  sureCancel(){
             cancelOrder({sn:this.orderInfo.sn}).then((res) => {
				 if(res.code - 200 === 0){
					 uni.showToast({
						 icon:'none',
						 title:'取消成功',
						 success:()=>{
							uni.switchTab({
								url:'/pages/order/index',
								success:()=>{
									// let pages = getCurrentPages();
									// let prePage = pages[pages.length - 1]
									// prePage.$vm.getMyOrders();
								}
							})
						 }
					 }) 
				 }else{
					uni.showToast({
						 icon:'none',
						 title:res.msg
					 })
				 }
				 this.close()
			 })
		  },
			getOrderInfo(id){
				orderDetail({sn:id}).then((res) => {
					console.log(res)
					this.orderInfo = res.data
					this.orderInfo.washMenu.cost = this.orderInfo.cost
					this.list2 = res.data.orderFlows.map((item) => {
						return {title: item.staffRemark, desc: item.createDate}
					})
					this.active = this.list2.length
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  background: #F8F8F8;
	  height: 100%;
	  overflow: auto;
	  .order-step{
		  margin-bottom: 40rpx;
		  margin-top:20rpx;
	  }
	  .carInfo{
		  margin-top: 40rpx;
		  margin-bottom: 20rpx;
	  }
	  .mainTitle{
		  width: 686rpx;
		  margin: 0 auto;
	  }
	  .refund{
		  margin-bottom: 40rpx;
		  .refund-tip{
			  font-size: 28rpx;
			  color: #AEB3B3;
			  text-indent: 20rpx;
			  line-height: 80rpx;
		  }
	  }
	  .soli-item{
		  width: 96%;
		  display: flex;
		  line-height: 80rpx;
		  border-bottom: 1px solid #F8F8F8;
		  justify-content: space-between;
		  align-items: flex-start;
		  margin: 0 auto;
		  font-size: 30rpx;
		  .title{
			  width: 200rpx;
			  color: #2a2b2b;
			  text-indent: 20rpx;
		  }
		  .value{
			  text-align: right;
			  color: #AEB3B3;
			  width: calc(100% - 220rpx);
			  word-wrap: break-word;
		  }
		  .phone{
			  color: #02B1AA;
			  margin-right: 20rpx;
		  }
	  }
	  .allPrice{
		  width: 686rpx;
		  margin: 0 auto 20rpx;
		  text-align: right;
		  .all{
			  font-weight: 800;
			  font-size: 30rpx;
			  color: #2A2B2B;
		  }
		  .dw{
			  font-size: 24rpx;
			  color: #F96501;
		  }
		  .price{
			  font-size: 40rpx;
			  color: #F96501;
		  }
	  }
	  .popup-content{
	  	width: 550rpx;
	  	height: 300rpx;
	  	padding: 40rpx;
	  	background:#fff;
	  	border-radius: 10rpx;
	  	font-size: 24rpx;
	  	text-align: center;
	  	padding-top: 80rpx;
	  	background: #fff linear-gradient( 180deg, rgba(2,177,170,0.12) 0%, rgba(0,214,142,0) 20%);
	  	border-radius: 16rpx 16rpx 16rpx 16rpx;
	  	.popup-title{
	  		font-size: 32rpx;
	  		font-weight: 600;
	  		line-height: 40rpx;
	  	}
	  	.popup-tip-info{
	  		line-height: 46rpx;
	  		margin: 40rpx 0;
	  	}
	  	.popup-btns{
	  		width: 500rpx;
	  		margin: 0 auto;
	  		display: flex;
	  		.btn{
	  			height: 80rpx;
	  			line-height: 80rpx;
	  			font-size: 26rpx;
	  			margin-bottom: 30rpx;
	  			width: 200rpx;
	  		}
	  		.btn1{
	  			background: #02B1AA;
	  		}
	  	}
	   }
	  .footer{
		  height: 180rpx;
		  .btn{
			  width: 240rpx;
			  height: 88rpx;
			  background: #FF3E3E;
			  line-height: 88rpx;
			  float: right;
			  color: #fff;
			  margin-top: 50rpx;
			  margin-right: 60rpx;
			  font-size: 32rpx;
		  }
	  }
  }
</style>
